<template>
  <q-modal v-model="opened" :content-css="{minWidth: '80vw', minHeight: '80vh'}" @hide="close" @show="openInfo">
    <q-modal-layout ref="svgModal">
      <q-toolbar slot="header">
        <q-btn flat round dense @click="opened = false" icon="reply"/>
        <q-toolbar-title>Projects&Services&Hosts</q-toolbar-title>
      </q-toolbar>
      <q-tabs animated swipeable inverted color="secondary" align="justify">
        <q-tab v-for="n in info" :key="n.hostname" :name="n.hostname" slot="title" :label="n.hostname"/>
        <q-tab-pane keep-alive v-for="n in info" :key="n.hostname" :name="n.hostname">
          <pre>{{fmt(n.result)}}</pre>
        </q-tab-pane>
      </q-tabs>
    </q-modal-layout>
  </q-modal>
</template>

<script>
import {post} from 'plugins/axios'
import { getFormatData } from 'plugins/common.js'
export default {
  name: 'ProjectInfo',
  data () {
    return {
      opened: false,
      info: [],
      count: ''
    }
  },
  props: {
    infoDialog: {
      type: Boolean,
      default: false
    },
    projectId: {
      type: Number,
      default: null
    }
  },
  methods: {
    close () {
      this.$emit('upInfo')
      this.info = []
    },
    openInfo () {
      post('/project/project_info/', {
        opt: this.projectId
      }).then((response) => {
        this.info = JSON.parse(response).info
        this.count = response.count
      }).catch((error) => {
        console.log(error.response.data.detail)
      })
    },
    fmt (result) {
      return getFormatData(result)
    }
  },
  watch: {
    infoDialog () {
      this.opened = this.infoDialog
    }
  }
}
</script>

<style>
</style>
